<template>
    <div class="step">
        <div class="container">
            <div class="step_item">
                <div class="syep_item_box C6A67D">
                    <div class="syep_item_line">
                        <span class="line"></span>
                        <span class="circle">✔</span>
                        <span class="line"></span>
                    </div>
                    <p>开始报名</p>
                </div>
                <div class="syep_item_box C6A67D">
                    <div class="syep_item_line">
                        <span class="line"></span>
                        <span class="circle">✔</span>
                        <span class="line"></span>
                    </div>
                    <p>提交报名</p>
                </div>
                <div class="syep_item_box C6A67D">
                    <div class="syep_item_line">
                        <span class="line"></span>
                        <span class="circle">
                            <span></span>
                        </span>
                        <span class="line"></span>
                    </div>
                    <p>笔试</p>
                </div>
                <div class="syep_item_box">
                    <div class="syep_item_line">
                        <span class="line"></span>
                        <span class="circle"></span>
                        <span class="line"></span>
                    </div>
                    <p>面试</p>
                </div>
                <div class="syep_item_box">
                    <div class="syep_item_line">
                        <span class="line"></span>
                        <span class="circle"></span>
                        <span class="line"></span>
                    </div>
                    <p>录取结果</p>
                </div>
            </div>
            <div class="lookbt"><a href="#">查看信息</a></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'schedule', //头部进度
    props: {

    },
    data() {
        return {

        };
    },
    methods: {

    },
    components: {

    },
};
</script>

<style scoped lang="scss">
.step {
    width: 100%;
    background: #fff;
    padding-top: 40px;
    padding-bottom: 40px;

    .step_item {
        display: flex;
        margin-bottom: 23px;

        .syep_item_box {
            flex: 1;

            .syep_item_line {
                height: 32px;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .line {
                    flex: 1;
                    height: 2px;
                    background-color: #8C8C8C;
                }

                .circle {
                    font-weight: bold;
                    width: 24px;
                    height: 24px;
                    background: #FFFFFF;
                    border: 2px solid #8C8C8C;
                    border-radius: 50%;
                }
            }

            p {
                padding-top: 11px;
                text-align: center;
                height: 21px;
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #8C8C8C;
            }
        }

        .C6A67D {
            .syep_item_line {
                .line {
                    background-color: #C6A67D;
                }

                .circle {
                    color: #C6A67D;
                    border: 2px solid #C6A67D;

                    span {
                        display: flex;
                        width: 12px;
                        height: 12px;
                        border-radius: 50%;
                        background-color: #C6A67D;
                    }
                }
            }

            p {
                color: #C6A67D;
            }
        }
    }

    .lookbt {
        a {
            margin: 0 auto;
            width: 140px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            font-size: 16px;
            font-weight: 300;
            color: #FFFFFF;
            background: #C6A67D;
            display: block;
        }
    }
}

@media (max-width: 768px) {
    .step {
        width: 90%;
        padding: 5% 5%;
        background: #fff;
        margin-bottom: 21px;

        .step_item {
            display: flex;
            margin-bottom: 21px;

            .syep_item_box {
                flex: 1;

                .syep_item_line {
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    span {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .line {
                        flex: 1;
                        height: 2px;
                        background-color: #8C8C8C;
                    }

                    .circle {
                        font-weight: bold;
                        width: 20px;
                        height: 20px;
                        background: #FFFFFF;
                        border: 2px solid #8C8C8C;
                        border-radius: 50%;
                    }
                }

                p {
                    padding-top: 11px;
                    text-align: center;
                    height: 21px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #8C8C8C;
                }
            }

            .C6A67D {
                .syep_item_line {
                    .line {
                        background-color: #C6A67D;
                    }

                    .circle {
                        color: #C6A67D;
                        border: 2px solid #C6A67D;

                        span {
                            display: flex;
                            width: 12px;
                            height: 12px;
                            border-radius: 50%;
                            background-color: #C6A67D;
                        }
                    }
                }

                p {
                    color: #C6A67D;
                }
            }
        }

        .lookbt {
            a {
                cursor: pointer;
                margin: 0 auto;
                width: 120px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                font-size: 14px;
                font-weight: 300;
                color: #FFFFFF;
                background: #C6A67D;
                display: block;
            }
        }
    }
}
</style>
